<template>
    <div class="content">
        <div class="container-xl">
            <div class="row">
                <div class="col-6 event">
                    <div class="event-title">
                        <h2 style="color: #005aa0;">新闻资讯</h2>
                        <button type="button" class="btn btn-outline-primary" @click="clickToNewsInformation">查看更多</button>
                    </div>
                    <div class="event-content" v-for="event in events.slice(0, 4)" :key="event.id" @click="clickToJump(event)">
                        <div class="event-content-date">
                            <div style="font-size: 30px;">{{ new Date(event.createtime).getDate() }}</div>
                            <div style="font-size: 18px;">{{ new Date(event.createtime).getFullYear() }}-{{ new Date(event.createtime).getMonth() + 1 }}</div>
                        </div>
                        <div class="event-content-info">
                            <div class="event-content-info-title">{{ event.title }}</div>
                            <p class="event-content-info-text">{{ event.summary }}</p>
                        </div>
                    </div>
                </div>
                <div class="col-6 notice">
                    <div class="notice-title">
                        <h2 style="color: #005aa0;">通知公告</h2>
                        <button type="button" class="btn btn-outline-primary" @click="clickToNoticeAnnouncement">查看更多</button>
                    </div>
                    <div class="row notice-content" v-for="index in [0, 1, 2]" :key="index">
                        <div class="col-sm-6 mb-3 mb-sm-0 notice-content-1">
                            <div class="card border-primary mb-3" style="max-width: 20rem; height: 160px;">
                                <div class="card-header" style="display: flex; align-items: center;">
                                    <img src="@/assets/image/calendar.png" style="width: 20px; height: 20px; margin-right: 5px;">
                                    <div style="font-size: 18px; color: #5a5aa0;">2024-11-21</div>
                                </div>
                                <div class="card-body">
                                    <p class="card-text notice-content-info">2024年湖北省“劳模工匠进校园”全国示范活动暨湖北工业大学《追梦》思政通识课通知</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 notice-content-2">
                            <div class="card border-primary mb-3" style="max-width: 20rem; height: 160px;">
                                <div class="card-header" style="display: flex; align-items: center;">
                                    <img src="@/assets/image/calendar.png" style="width: 20px; height: 20px; margin-right: 5px;">
                                    <div style="font-size: 18px; color: #5a5aa0;">2024-11-21</div>
                                </div>
                                <div class="card-body">
                                    <p class="card-text notice-content-info">“2024中非大学校长创新发展论坛 第3届中非工业创新与技术转移合作论坛”即将在武汉举办</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import $ from 'jquery';
import { useStore } from 'vuex';
import { ref } from 'vue';
import router from '@/router/index';

const store = useStore();
let events = ref([]);

const clickToNewsInformation = () => {
    router.push({name: 'NewsInformation'});
}
const clickToJump = (event) => {
    localStorage.setItem('records', JSON.stringify(events.value));
    router.push({
        name: "ContentDetail",
        params: {
            option: "events",
            id: event.id
        },
    })
}

const pull_page = page => {
    $.ajax({
        url: "http://localhost:3000/api/exhibit/event/get-record-info",
        type: "get",
        data: {
            page,
        },
        success(resp) {
            events.value = resp.records;
            store.commit("updateEvents", resp.records);
        },
        error(resp) {
            console.log(resp);
        }
    })
}
pull_page(1);

// --------------------------------------------------------------------------------------------

const clickToNoticeAnnouncement = () => {
    router.push({name: 'NoticeAnnouncement'});
}

</script>

<style scoped>

.content {
    width: 100%;
    height: 720px;
}

.event, .notice {
    padding: 30px 0;
}
.event {
    padding-right: 30px;
}
.event-title {
    display: flex; 
    align-items: flex-start; 
    justify-content: space-between; 
    margin-bottom: 30px;
}
.event-content {
    padding: 20px 10px;
    border-bottom: 1px dashed #d5d5d5;
    height: 150px;
    display: flex;
    align-items: center;
    transition: transform 0.3s ease; /* 为transform添加过渡动画 */
}
.event-content:hover {
    cursor: pointer;
    transition: 500ms;
    box-shadow: 0 24px 30px rgba(0, 0, 0, 0.3); 
}
.event-content:hover .event-content-date {
    background-color: #3aa0bd;
}
.event-content:hover .event-content-info-title {
    color: #005aa0;
}
.event-content-date {
    width: 80px;
    min-width: 80px;
    height: 100%;
    background-color: #235cb0;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-right: 30px;
}
.event-content-info {
    height: 100%;
    width: 500px;
}
.event-content-info-title {
    font-size: 18px; 
    font-weight: bold; 
    margin-bottom: 5px;
    word-wrap: break-word;        /* 允许单词在需要时换行 */
    overflow: hidden;             /* 隐藏超出容器的部分 */
    text-overflow: ellipsis;      /* 超出部分显示省略号 */
    display: -webkit-box;         /* 使用 WebKit 布局来处理溢出 */
    -webkit-line-clamp: 1;        /* 限制文本行数为 3 行，超出部分显示省略号 */
    -webkit-box-orient: vertical; /* 垂直排列 */
}
.event-content-info-text {
    color: #666666;
    word-wrap: break-word;        /* 允许单词在需要时换行 */
    overflow: hidden;             /* 隐藏超出容器的部分 */
    text-overflow: ellipsis;      /* 超出部分显示省略号 */
    display: -webkit-box;         /* 使用 WebKit 布局来处理溢出 */
    -webkit-line-clamp: 3;        /* 限制文本行数为 3 行，超出部分显示省略号 */
    -webkit-box-orient: vertical; /* 垂直排列 */
}

.notice {
    padding-left: 30px;
}
.notice-content {
    margin-bottom: 10px;
}
.notice-title {
    display: flex; 
    align-items: flex-start; 
    justify-content: space-between; 
    margin-bottom: 40px;
}
.notice-content-info {
    word-wrap: break-word;        /* 允许单词在需要时换行 */
    overflow: hidden;             /* 隐藏超出容器的部分 */
    text-overflow: ellipsis;      /* 超出部分显示省略号 */
    display: -webkit-box;         /* 使用 WebKit 布局来处理溢出 */
    -webkit-line-clamp: 3;        /* 限制文本行数为 3 行，超出部分显示省略号 */
    -webkit-box-orient: vertical; /* 垂直排列 */
}

.notice-content:hover {
    cursor: pointer;
}
.notice-content-1:hover .notice-content-info {
    color: #005fa3;
}
.notice-content-2:hover .notice-content-info {
    color: #005fa3;
}

</style>